import './index.css'
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'

/**
 * Geometry
 */
const pointsGeometry = new THREE.BufferGeometry()
const count = 5000;
const positions = new Float32Array(count * 3)
const colors = new Float32Array(count * 3)
for (let i = 0; i < count * 3; i++) {
    positions[i] = (Math.random() - 0.5) * 5
    colors[i] = Math.random()
}
pointsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
pointsGeometry.setAttribute('color',new THREE.BufferAttribute(colors,3))


/**
 * Textures
 */
const textureLoader = new THREE.TextureLoader()
const pointMapTexture = textureLoader.load('https://gw.alicdn.com/imgextra/i3/O1CN01DO6Ed61QtcMKsVnK2_!!6000000002034-2-tps-56-56.png')


/**
 * Matetrial
 */
const pointMaterial = new THREE.PointsMaterial({
    size: 0.1,
    sizeAttenuation: true
})

// pointMaterial.color = new THREE.Color('#ff88cc')
pointMaterial.map = pointMapTexture
pointMaterial.alphaMap = pointMapTexture
pointMaterial.transparent = true
pointMaterial.depthWrite = false
pointMaterial.blending = THREE.AdditiveBlending  //颜色混合

// 开启顶点着色
pointMaterial.vertexColors = true

/**
 * Points
 */
const points = new THREE.Points(pointsGeometry, pointMaterial)

/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}


/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.z = 3

/**
 * Scene
 */
const scene = new THREE.Scene()
scene.add(points)

/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(Size.width, Size.height)




/**
 * OrbitControls
 */
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true



/**
 * Update
 */

const clock = new THREE.Clock()
const tick = () => {
    const elapsedTime = clock.getElapsedTime()
    

    for(let i=0;i<count;i++){
        const x = pointsGeometry.attributes.position.getX(i)
        pointsGeometry.attributes.position.setY(i,Math.sin(x + elapsedTime))
    }

    pointsGeometry.attributes.position.needsUpdate = true

    controls.update();
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()